{template 'header'}
<style>
body {margin: 0px;padding: 0px;width: 320px;background-color: #ebebeb;}
ul,li{list-style-type:none;}
.box {margin: 8px;width: 95%;font-size: 13px;padding: 0px;}
.hd {display: block;height: 246px;width: 73%;overflow: hidden;float: left;margin-bottom: 8px;}
.nav li {margin-bottom: 3px;display: block;text-align: center;}
.nav a {color: #53597D;background-color: #fff;}
.nav li:nth-child(1) {float: right;height: 80px;width: 80px;margin-bottom: 3px;background-color: #C36;display: block;}
.nav li:nth-child(1) i {height: 35px;width: 35px;display: block;margin: 15px auto 5px auto;}
.nav li:nth-child(1) a {color: #FFF;background-color: #C36;}
.nav li:nth-child(2) {background-color: #53597d;float: right;height: 80px;width: 80px;}
.nav li:nth-child(2) i {height: 35px;width: 35px;display: block;margin: 15px auto 5px auto;}
.nav li:nth-child(2) a {background-color: #53597d;color: #FFF;}
.nav li:nth-child(3) {background-color: #53597d;float: right;height: 80px;width: 80px;margin: 0 0 8px 0;}
.nav li:nth-child(3) i {height: 35px;width: 35px;display: block;margin: 15px auto 5px auto;}
.nav li:nth-child(3) a {background-color: #53597d;color: #FFF;}
.nav li:nth-child(4) {background-color: #fff;float: left;height: 80px;width: 24%;margin: 0 4px 8px 0;}
.nav li:nth-child(4) i {height: 35px;width: 35px;display: block;margin: 15px auto 5px auto;}
.nav li:nth-child(4) a {color: #53597D;background-color: #fff;}
.nav li:nth-child(5) {background-color: #fff;float: left;height: 80px;width: 24%;margin: 0 4px 8px 0;}
.nav li:nth-child(5) i {height: 35px;width: 35px;display: block;margin: 15px auto 5px auto;}
.nav li:nth-child(5) a {color: #53597D;background-color: #fff;}
.nav li:nth-child(6) {background-color: #fff;float: left;height: 80px;width: 24%;margin: 0 4px 8px 0;}
.nav li:nth-child(6) i {height: 35px;width: 35px;display: block;margin: 15px auto 5px auto;}
.nav li:nth-child(6) a {color: #53597D;background-color: #fff;}
.nav li:nth-child(7) {background-color: #fff;float: left;height: 80px;width: 24%;}
.nav li:nth-child(7) i {height: 35px;width: 35px;display: block;margin: 15px auto 5px auto;}
.nav li:nth-child(7) a {color: #53597D;background-color: #fff;}
.nav li:nth-child(8) {background-color: #fff;float: left;height: 190px;width: 49%;overflow: hidden;line-height: 24px;margin: 0 0 8px 0;}
.nav li:nth-child(8) i {height: 160px;display: block;margin-top: 0px;margin-right: auto;margin-left: auto;}
.nav li:nth-child(8) a {color: #53597D;background-color: #fff;}
.nav li:nth-child(9) {background-color: #fff;float: right;height: 190px;width: 49%;overflow: hidden;line-height: 24px;margin: 0 0 8px 0;}
.nav li:nth-child(9) i {height: 160px;display: block;margin-top: 0px;margin-right: auto;margin-left: auto;}
.nav li:nth-child(9) a {color: #53597D;background-color: #fff;}
.nav li:nth-child(10) {background-color: #fff;float: left;height: 190px;width: 49%;overflow: hidden;line-height: 24px;margin: 0 0 8px 0;}
.nav li:nth-child(10) i {height: 160px;display: block;margin-top: 0px;margin-right: auto;margin-left: auto;}
.nav li:nth-child(10) a {color: #53597D;background-color: #fff;}
.nav li:nth-child(11) {background-color: #fff;float: right;height: 190px;width: 49%;overflow: hidden;line-height: 24px;margin: 0 0 8px 0;}
.nav li:nth-child(11) i {height: 160px;display: block;margin-top: 0px;margin-right: auto;margin-left: auto;}
.nav li:nth-child(11) a {color: #53597D;background-color: #fff;}
.clear{clear:both;line-height:0;height:0;font-size:0;overflow:hidden;}
</style>


<div class="box">
    <div class="hd">{template 'slide'}</div>
    <ul class="nav">
      {loop $navs $nav}
		<li class="icon-items"><a href="{$nav['url']}">
        {if !empty($nav['icon'])}
		<i style="background:url({$_W['attachurl']}{$nav['icon']}) no-repeat;background-size:cover;"></i>
		{else}
		<i class="{$nav['css']['icon']['icon']}" style="{$nav['css']['icon']['style']}"></i>
	    {/if}
      {$nav['name']}</a>
      </li>
{/loop}
    </ul>
  </div>
<div class="clear"></div>
{template 'footer'}
